<template>
  <div id="add-to-assess">
    <div class="search-box">
      <el-form>
        <el-form-item label="任务ID：">
          <el-input
            placeholder="请输入任务ID"
            v-model="searchForm.taskCode"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="订单号：">
          <el-input
            placeholder="请输入订单号"
            v-model="searchForm.orderNum"
            size="small"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="状态 ：">
          <el-select v-model="searchForm.status" placeholder="请选择类型" size="small">
            <el-option label="全部" value=""/>
            <el-option v-for="(item, index) in status" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="search-btn" icon="el-icon-ali-search" @click="searchData">查&nbsp;询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button class="reset-btn" icon="el-icon-ali-reset" @click="resetSearchParam">重&nbsp;置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="table-box">
      <el-table border :data="tableData" max-height="580px">
        <el-table-column prop="status_name" label="状态"/>
        <el-table-column prop="task_code" label="任务编号"/>
        <el-table-column prop="order_num" label="订单号"/>
        <el-table-column width="300px" prop="assess_img_url" label="截图">
          <div slot-scope="scope">
            <img style="width: 80px;height: 80px;float: left;position: relative;" class="show-img" :src="item" alt="" v-for="(item, index) in scope.row.assess_img_url_array" :key="index"/>
          </div>
        </el-table-column>
        <el-table-column prop="tb_name" label="推手账号"/>
        <el-table-column prop="over_time" label="创建时间/处理时间">
          <div slot-scope="scope">
            <div>{{ scope.row.create_time }}</div>
            <div>{{ scope.row.treat_time }}</div>
          </div>
        </el-table-column>
        <el-table-column prop="remark" label="说明"/>
      </el-table>
        <el-pagination
          :page-sizes="[5, 10, 15, 20, 50, 100]"
          :page-size="searchForm.pageSize"
          :current-page="searchForm.page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageToatal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
    </div>

  </div>
</template>

<script>
import {
  apiExchangeAssessOrder
} from '../../request/api.js'
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      searchForm: {
        token: "",
        page: 1,
        pageSize: 10,
        orderNum: "",
        taskCode: "",
        status: "",
        startTime: "",
        endTime: "",
      },
      pageToatal: 0,
      tableData: [],
      status: [
        {
          label: "兑换成功",
          value: 1
        },
        {
          label: "争议处理",
          value: 2
        },
        {
          label: "驳回",
          value: 3
        }
      ],
      userToken: window.localStorage.getItem("token")
    };
  },
  created() {
    this.searchForm.token = this.userToken;
    this.getTableData();
  },
  computed: {
    ...mapGetters(["platformType"])
  },
  methods: {
    getTableData() {
      this.$isClick(true);
      apiExchangeAssessOrder(this.searchForm)
        .then(res => {
          this.$isClick(false);
          if (res.code == 1) {
            this.tableData = res.msg.res;
            this.pageToatal = res.msg.allNum;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(res => {
          this.$isClick(false);
          this.$message.error(res.msg);
        });
    },

    searchData() {
      this.searchForm.page = 1;
      this.searchForm.pageSize = 10;
      this.getTableData();
    },
    resetSearchParam() {
      this.searchForm = {
        token: this.userToken,
        page: 1,
        pageSize: 10,
        taskCode: "",
        status: "",
        startTime: "",
        endTime: "",
        orderNum: "",
      };
    },

    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getTableData();
    }
  }
};
</script>

<style lang="less">
#add-to-assess {
  .table-header-box {
    .tips {
      color: red;
      text-align: right;
      margin: 10px 0;
    }
  }
  .success-list-btn {
    .look-btn {
      background: #f16f6f;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
      margin-left: 0 !important;
    }
    .stop-btn {
      background: @themeColor;
      color: #fff;
      padding: 8px 15px !important;
      margin-bottom: 5px;
      margin-left: 0 !important;
    }
    .appeal-btn {
      background: red;
      color: #fff;
      padding: 8px 15px !important;
      margin-left: 0 !important;
    }
  }
  .check-assess-dialog {
    .dialog-body {
      .dialog-cell {
        display: flex;
        margin-bottom: 16px;
        .dialog-cell-title {
          width: 100px;
          text-align: right;
        }
        .dialog-cell-content {
          flex: 1;
          img {
            width: 120px;
            height: 150px;
            border: 1px dashed #e0e0e0;
            margin-right: 10px;
          }
          .video {
            width: 120px;
            height: 150px;
            border: 1px dashed #e0e0e0;
          }
          position: relative;
          .cover-preview__small {
            display: flex;
            width: 80%;
          }
          .cover-preview__large {
            display: none;
            position: fixed;
            box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.08);
            left: 0;
            top: -100%;
            width: 300px;
            height: 80%;
            z-index: 9;
          }
        }
      }
    }
  }
}
.el-popover {
  .goods-preview-img,
  .keyword-preview-img {
    width: 200px;
    height: 200px;
  }
}
.msgLight input {
  border: red solid 1px;
}
</style>
